<template>
  <div class="layout-box">
      <SearchBox></SearchBox>
      <div class="menu-box">
          <TopNavBox></TopNavBox>
          <div class="left-nav-box">
              <div class="category-content" @mouseleave="navOutHandler">
                  <div class="category">
                      <ul class="category-list">
                          <li class="category-li" v-for="(item, index) in leftNavList" :key="index" @mouseenter="navEnterHandler(item)">
                              <div class="category-info">
                                  <h3 class="category-name">
                                      <img class="category-img" :src="require('@/assets/images/leftNav/' + item.categoryIcon)" alt="">
                                      <a class="ml-22" title="点心">{{ item.categoryName }}</a>
                                  </h3>
                                  <span class="sign">&gt;</span>
                              </div>
                          </li>
                      </ul>
                      <div class="sub-category">
                          <el-row>
                              <el-col :span="12" v-for="category in subCategory.categories">
                                  <div class="sub-menu-box">
                                      <span class="sub-name">{{ category.categoryName }}</span>
                                      <ul class="sub-ul">
                                          <li class="sub-li" v-for="sub in category.categories" @click="enterListHandler">
                                              {{sub.categoryName}}
                                          </li>
                                      </ul>
                                  </div>
                              </el-col>
                          </el-row>
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </div>
</template>
<script lang="ts" setup>
import {onMounted, reactive, ref} from 'vue'
import SearchBox from "@/components/searchModel/searchBox.vue";
import TopNavBox from "@/components/searchModel/topNavBox.vue";
import {leftNavApi} from "@/api/index/snow";
import { getAssetUrl } from '@/utils/until'

const leftNavList  = ref([])
const subCategory = ref([])

onMounted(() => {
    getLeftNavList()
})

// 获取导航数据
const getLeftNavList = () => {
    leftNavApi().then(res => {
        if(res) {
            leftNavList.value = res.data.data
        }
    })
}

// 鼠标移入导航事件
const navEnterHandler = (item: any) => {
    subCategory.value = JSON.parse(JSON.stringify(item))
}

// 鼠标移出导航事件
const navOutHandler = () => {
    subCategory.value = []
}

// 进入列表页
const enterListHandler = () => {

}

</script>
<style scoped>
    .layout-box{
        max-width: 1000px;
        margin: 0 auto;
        .menu-box{
            position: relative;
        }
        .left-nav-box{
            display: none;
        }
        @media only screen and (min-width: 1025px){
            .left-nav-box{
                display: block;
                position: absolute;
                top: 45px;
                z-index: 10002;
                .category-content{
                    position:relative;
                    width: 150px;
                    float: left;
                    z-index: 113;
                    background:  #fff;
                    .category{
                        width:150px;
                        border-top: none;
                        background: #2b2b2b;
                        box-shadow: 8px 0 7px -3px rgba(0,0,0,.3)
                    }
                    .category-list{
                        margin: 0;
                        padding: 0;
                        list-style: none;
                        .category-li{
                            cursor: pointer;
                            height: 34px;
                            border-top: 1px solid #AAA;
                            border-bottom: 1px solid #252525;
                        }
                        .category-li:hover{
                            background: #FFFFFF;
                            .ml-22, .sign{
                                color: #4c4c4c;
                            }
                        }
                        .category-info{
                            position: relative;
                            height: 100%;
                            padding-left: 12px;
                            width: 140px;
                            overflow: hidden;
                            .sign{
                                position: absolute;
                                top: 9px;
                                right: 15px;
                                width: 13px;
                                height: 13px;
                                color: #fff;
                            }
                        }
                        .category-name{
                            margin: 0;
                            padding-top: 3px;
                            line-height: 32px;
                            position: relative;
                            .category-img{
                                position: absolute;
                                top: 6px;
                                width: 25px;
                                height: 25px;
                                border-radius: 25px;
                                left: 6px;
                            }
                            .ml-22{
                                font-size: 14px;
                                color: #FFFFFF;
                            }
                        }
                    }
                    .sub-category{
                        display: none;
                        margin-top: 2px;
                        background: #FFFFFF;
                        width: 730px;
                        height: 100%;
                        position: absolute;
                        top: 0;
                        left: 150px;
                        .sub-menu-box{
                            text-align: left;
                            padding: 10px 0 10px 40px;
                            .sub-name{
                                color: #db3e54;
                                font-weight: bold;
                            }
                            .sub-ul{
                                list-style: none;
                                margin: 0;
                                padding: 0;
                                .sub-li{
                                    float: left;
                                    color: #888;
                                    line-height: 14px;
                                    padding: 5px 10px;
                                    border: 1px solid #e6e6e6;
                                    margin: 2px 6px 4px 0;
                                    cursor: pointer;
                                    font-size: 14px;
                                }
                                .sub-li:hover{
                                    color: #db3e54;
                                }
                            }
                        }
                    }
                }
                .category-content:hover{
                    .sub-category{
                        display: block;
                    }
                }
            }
        }
    }
</style>